@layout("/common/_container.html",{css:["/assets/expand/module/limarquee/css/liMarquee.css"],js:["/assets/modular/recy/orderForm/orderForm.js"]}){
<style>
    .site-doc-color{
        padding:20px;
    }
    .site-doc-color li{
        width:200px;
        height:70px;
        text-align:center;
        color:white;
        float:left;
        margin-right:20px;
    }
    .site-doc-color li p{
        line-height: 2;
    }
    html{
        background-color:#003366;
    }
    body{
        background-color: #003366;
        height:100%;
        color:white
    }
    .info_box{
        clear:both;
        background:url(${ctxPath}/assets/common/images/part4.png) no-repeat;
        width:451px;height:347px;
        padding-top:9px;
        align:right;
        float:right;
    }
    .layui-tab-title .layui-this{
        color:white
    }
    .marqueeContainer.str_wrap{
        background:none;
    }
    .bgimg{
        position:fixed;
        top: 0;
        left: 0;
        width:100%;
        height:100%;
        min-width: 1000px;
        z-index:-10;
        zoom: 1;
        background-color: #fff;
        background: url(${ctxPath}/assets/common/images/stars.jpg) no-repeat;
        background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
        background-position: center 0;
    }
    .rankings_table{
        width:100%;margin:0 auto;border-spacing:5px;border-collapse: separate;
    }
    .rankings_table td{
        border-bottom: 1px dotted white;
        padding:5px;
        line-height:2;
    }
    .rankings_table th{
        background-color: #353942;
        padding:5px;
        line-height:2;
    }
    .data-item{
        padding-top:10px;
        margin-left:50px;
    }
    .data-item .title{
        background:url(${ctxPath}/assets/common/images/title_bg.png) no-repeat;
        height:26px;
        color:white;
        line-height:26px;
        text-align:center;
    }
    .data-item .data{
        color:#fc9c24
    }
    .data-item .data .unit{
        color:white;
    }
</style>
<div class="bgimg">
<div>
    <div style="text-align:center;font-size:20px;font-weight:bold;line-height:70px;color:white;height:85px;background:url(${ctxPath}/assets/common/images/title.png) center center repeat-x;">${area}</div>
</div>
<div class="layui-row" style="width:1350px;margin:0 auto">
<div class="layui-col-md4">
    <div>
        <div class="info_box" style="clear:both;">
            <div style="text-align:center;font-size:18px;font-weight:bold"> 垃圾回收周趋势图</div>
            <div id="weekTrends" style="padding-left:20px;width: 450px;height:300px;"></div>
        </div>

    </div>



</div>
    <div class="layui-col-md8">
<!--        <iframe src="${ctxPath}/assets/modular/recy/echarts3-map/index.html" width="100%" height="1000px" frameborder="0"></iframe>-->
        <div style="text-align:center;background:url('${ctxPath}/assets/common/images/part-width3.png') no-repeat;width:900px;height:347px;">
            <div class="layui-row">
                <div class="layui-col-md6">
                    <div id="userRate" style="padding-left:20px;width: 450px;height:300px;padding-top:50px;">

                    </div>
                </div>
                <div class="layui-col-md6">

                    <div id="recyTypeRate" style="padding-left:20px;width: 450px;height:300px;padding-top:30px">

                    </div>
                </div>
            </div>
        </div>




    </div>


</div>
    <div style="margin:0 auto;border-bottom:2px solid red;color:white;width:1350px">
    <div class="layui-row">
        <div class="layui-col-md12">
<!--            <div class="info_box" style="background:url('${ctxPath}/assets/common/images/part-width3.png') no-repeat;width:900px;height:347px;">-->
            <div>
                <div style="text-align:center;font-size:18px;font-weight:bold;line-height: 1.5"> 垃圾回收站点分布图</div>
                <div id="mapContainer" style="width:100%;height:300px;margin:0 auto">

                </div>
            </div>
<!--            </div>-->
        </div>
        <div class="layui-col-md12">
            <div style="height:500px;">
                <div style="font-size:18px;font-weight:bold">各类垃圾实时回收数据：</div>
                <div class="layui-tab">
                    <ul class="layui-tab-title">
                        @var hasShow = false;
                        @for(wasteTypeName in wasteTypeNameMap){
                        @var orderSize = resentOrderMap[wasteTypeName.value].~size!0;
                        <li ${!hasShow && orderSize>0?"class='layui-this'":""}>${wasteTypeNameLP.index}.${wasteTypeName.value}</li>
                        @if(!hasShow) {hasShow = !hasShow && orderSize>0;}
                        @}
                    </ul>
                    <div class="layui-tab-content">
                        <!-- <div class="layui-tab-item layui-show">内容1</div>
                         <div class="layui-tab-item">内容2</div>
                         <div class="layui-tab-item">内容3</div>
                         <div class="layui-tab-item">内容4</div>
                         <div class="layui-tab-item">内容5</div>-->
                        @hasShow = false;
                        @for(wasteTypeName in wasteTypeNameMap){
                        @var orderSize = resentOrderMap[wasteTypeName.value].~size!0;
                        <div class="layui-tab-item ${!hasShow && orderSize>0?'layui-show':''}">
                            @if(!hasShow) {hasShow = !hasShow && orderSize>0;}
                            @if(orderSize==0){
                            <div style="height:300px;">
                                暂无回收记录
                            </div>
                            @}else{
                            <div class="marquee-container">
                                <div class="marqueeContainer" style="height:300px;">
                                    <table class="rankings_table" style="margin:0">
                                        <thead>
                                        <th>用户名</th>
                                        <th>垃圾类别</th>
                                        <th>垃圾重量</th>
                                        <th>积分</th>
                                        <th>回收时间</th>
                                        </thead>
                                        <tbody>

                                        @for(order in resentOrderMap[wasteTypeName.value]){
                                        <tr>
                                            <td>${order.userIdModel.userName!""}</td>
                                            <td>${wasteTypeName.value}</td>
                                            <td>${order.wasteWeight}克</td>
                                            <td>${order.price}</td>
                                            <td>${order.createTime,'yyyy-MM-dd HH:mm:ss'}</td>
                                        </tr>
                                        @}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            @}
                        </div>
                        @}
                    </div>
                </div>

            </div>
        </div>

    </div>
    </div>
    </div>

@}
<script src="https://cdn.staticfile.org/echarts/4.8.0/echarts.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=k6hUNlqyGNy0xyK60Un9hpFe2a8Fxch1"></script>
<script>
    layui.use(["jquery","element","liMarquee"],function(){
        var element = layui.element;
        var $ = layui.jquery;
        $(".layui-body-header",window.parent.document).hide();
        $(".layui-body-header.show+div",window.parent.document).offset({top:50});
        $(".layui-footer",window.parent.document).hide();
        var liMarquee = layui.liMarquee;
        $('.marqueeContainer').liMarquee({direction: 'up'});
        //var marquee = layui.marquee;
       // $(".marqueeContainer").marquee({direction:'top'});
       var weekChart =  echarts.init(document.getElementById("weekTrends"))
       var weekOption = {
           legend: {
               textStyle: {
                   color:'white'
               }
           },
           tooltip: {},
           textStyle:{
               color:'white'
           },
           dataset: {
               source: [
                   ['product'
                   @for(wasteTypeName in wasteTypeNameMap){
                    ,'${wasteTypeName.value}'
                    @}
                   ]
                    @for(var index=0;index<8;index++){
                    ,["${dateStrs[index]}",
                   @for(wasteTypeName in wasteTypeNameMap){
                        ${wasteTypeNameLP.index==1?"":","}
                        @if(isEmpty(tongjiMap7day[dateStrs[index]+"-"+wasteTypeName.value])){
                            0
                        @}else{
                            ${tongjiMap7day[dateStrs[index]+"-"+wasteTypeName.value]/1000}
                        @}
                   @}
                   ]
                    @}
               ]
           },
           xAxis: {type: 'category'},
           yAxis: {},
           // Declare several bar series, each will be mapped
           // to a column of dataset.source by default.
           series: [
           @for(wasteTypeName in wasteTypeNameMap){
                ${wasteTypeNameLP.index==1?"":","}{type: 'line',areaStyle:{}}
            @}
           ]
       };
        weekChart.setOption(weekOption);

        var userChart = echarts.init(document.getElementById("userRate"))
        userRateOption = {
            title:{
                text:"今日参与人数",
                left: 'center',
                textStyle: {
                    color:'white'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 10,
                data: ['总人数', '参与人数'],
                textStyle: {
                    color:'white'
                }
            },
            color : [ 'blue', 'green' ],
            series: [
                {
                    name: '人数',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: ${areaUserCount}, name: '总人数'},
                        {value: ${todayRecyUserCount}, name: '参与人数'}
                    ]
                }
            ]
        };
        userChart.setOption(userRateOption);
        var recyTypeRate = echarts.init(document.getElementById("recyTypeRate"));
        var recyTypeOption = {
            title: {
                text: '分类情况',
                left: 'center',
                textStyle: {
                    color:'white'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                left: 'center',
                top: 'bottom',
                data: [
                    @for(orderFormCleanMapEntry in cleanTypeNameMap){
                        ${orderFormCleanMapEntryLP.index==1?"":","}'${orderFormCleanMapEntry.value}'
                    @}
                ],
                textStyle: {
                    color:'white'
                }
            },
            color : [ 'green', 'red','blue' ],
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {
                        show: true,
                        type: ['pie', 'funnel']
                    },
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            series: [
                {
                    name: '半径模式',
                    type: 'pie',
                    radius: [20, 110],
                    roseType: 'radius',
                    label: {
                        show: true
                    },
                    emphasis: {
                        label: {
                            show: true
                        }
                    },
                    data: [

    @for(orderFormCleanMapEntry in cleanTypeNameMap){
            ${orderFormCleanMapEntryLP.index==1?"":","}{value:${orderFormCleanMap[orderFormCleanMapEntry.key]["total"]!0},name:"${orderFormCleanMapEntry.value}"}
        @}

                    ]
                }
            ]
        };
        recyTypeRate.setOption(recyTypeOption);



        var map = new BMap.Map("mapContainer");
        @for(wasteStation in wasteStationList){
            var point${wasteStationLP.index} = new BMap.Point(${wasteStation.gps});
            @if(wasteStationLP.index==1){
                map.centerAndZoom(point${wasteStationLP.index}, 15);
            @}
            var marker = new BMap.Marker(point${wasteStationLP.index});        // 创建标注
            map.addOverlay(marker);                     // 将标注添加到地图
            var opts${wasteStationLP.index} = {
                position : point${wasteStationLP.index},    // 指定文本标注所在的地理位置
                offset   : new BMap.Size(-60, -60)    //设置文本偏移量
            }
            var label${wasteStationLP.index} = new BMap.Label("${wasteStation.stationName}", opts${wasteStationLP.index});  // 创建文本标注对象
            label${wasteStationLP.index}.setStyle({
                color : "red",
                fontSize : "12px",
                height : "20px",
                lineHeight : "20px",
                fontFamily:"微软雅黑"
            });
            map.addOverlay(label${wasteStationLP.index});
        @}

        })
</script>